<template>
    <div class="user-edit-container">
      <!-- Header 区域 -->
      <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

      <!-- 用户资料 -->
      <van-cell-group class="action-card">
        <van-cell title="头像" is-link center>
          <template #default>
            <van-image round class="avatar" :src="profileObj.photo" @click="imageClickFn"/>
            <!-- file 选择框 -->
            <input
                type="file"
                ref="iptFile"
                v-show="false"
                accept="image/*"
                @change="onFileChange"
            />
          </template>
        </van-cell>
        <van-cell title="名称" is-link :value="profileObj.name" @click="nameClickFn"/>
        <van-cell title="生日" is-link :value="profileObj.birthday" @click="birthdayClickFn"/>
      </van-cell-group>
      <!-- 姓名修改弹窗 -->
      <van-dialog v-model="show" title="标题" show-cancel-button
      :beforeClose="beforeCloseFn" @opened="onOpenFn">
        <input type="text"  v-model="inputUserName">
      </van-dialog>
      <!-- 时间选择弹窗 -->
      <van-popup round v-model="dateTimePickShow" position="bottom" :style="{ height: '30%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="dateCancelFn"
        @confirm="confirmFn"
      />
      </van-popup>
    </div>
  </template>

<script>
import { updateUserPhotoAPI, userProfileAPI, updateUserProfileAPI } from '@/api'
import Notify from '@/ui/Notify.js'
import { formatDate } from '@/utils/date'
import { mapMutations } from 'vuex'
export default {
  name: 'UserEdit',
  data () {
    return {
      profileObj: {}, // 用户基本资料
      show: false, // 控制姓名修改弹窗输入框出现/隐藏
      inputUserName: '', // 修改名字-弹出框输入框绑定值
      minDate: new Date(1920, 0, 1), // 最小范围
      maxDate: new Date(), // 最大范围(默认获取系统日期)
      currentDate: new Date(2021, 0, 17), // 当前时间
      dateTimePickShow: false // 日期选择器弹出显示
    }
  },
  async created () {
    const res = await userProfileAPI()
    console.log(res)
    this.profileObj = res.data.data
  },
  methods: {
    ...mapMutations(['SET_USERPHOTO', 'SET_USERNAME']),
    // 文件选择改变 - 事件
    async onFileChange (e) {
      console.log(e.target.files[0])
      if (e.target.files.length === 0) return // 用户可能没有选择图片文件阻止代码往下

      // 创建FormData对象
      const theFd = new FormData()
      theFd.append('photo', e.target.files[0])// 请求体加入一堆参数名和值

      const res = await updateUserPhotoAPI(theFd)
      console.log(res)
      this.profileObj.photo = res.data.data.photo
      this.SET_USERPHOTO(res.data.data.photo) // 更新成功后，同步到Vuex中
    },
    // 图片 - 点击事件
    imageClickFn () {
    //   console.log(1)
      this.$refs.iptFile.click() // JS模拟标签的事件触发
    },
    // 姓名 - 点击事件
    nameClickFn () {
      this.show = true
      this.inputUserName = this.profileObj.name
    },
    // 由于v-fofo不太行，所以只能在动画结束后在聚焦了
    onOpenFn () {
      setTimeout(() => {
        const inputEl = document.querySelector('.van-dialog input')
        if (inputEl) {
          inputEl.focus() // 直接使用原生方法
        }
      })
    },
    // 姓名 - 确认框 - 关闭前回调函数
    async beforeCloseFn (action, done) {
      if (action === 'confirm') {
        // 点确定
        const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,7}$/
        if (reg.test(this.inputUserName) === true) {
          // 通过了校验
          const res = await updateUserProfileAPI({ name: this.inputUserName })
          console.log(res)
          this.profileObj.name = this.inputUserName
          this.SET_USERNAME(this.profileObj.name)
          done()
        } else {
          // 没通过校验，给用户提示
          Notify({ type: 'warning', message: '用户名只能是1-7位中英文组合' })
          done(false)
        }
      } else {
        // 点取消
        done()// 让弹窗关闭
      }
    },
    // 生日单元格 - 点击事件
    birthdayClickFn () {
      this.dateTimePickShow = true// 时间选择器出现
      this.currentDate = new Date(this.profileObj.birthday)
    },
    // 日期选择器 - 取消事件
    dateCancelFn () {
      this.dateTimePickShow = false
    },
    // 日期选择器 - 完成确认事件
    async confirmFn () {
      await updateUserProfileAPI(
        { birthday: formatDate(this.currentDate) })
      this.dateTimePickShow = false
      this.profileObj.birthday = formatDate(this.currentDate) // 单元格同步
    }
  }
}
</script>

  <style lang="less" scoped>
  .user-edit-container {
    padding-top: 46px;
    .avatar {
      width: 50px;
      height: 50px;
    }
  }
  ::v-deep .van-dialog__content{
    text-align:center;
    input {
      padding:0;
      outline: none;
      border:none;
      text-align: center
    }
  }
  </style>
